React+vite3.x实战配置

#React+vite3.x实战配置| 来源: 网络整理| 查看: 265

一、安装vite reacte（省略） vite官网

二、安装sass

npm install --save-dev sass

任何以 .module.css 为后缀名的 CSS 文件都被认为是一个 CSS modules 文件。 Vite 对 .scss, .sass, .less, .styl 和 .stylus 文件的提供了内置支持。没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖。详情引入scss文件在这里插入图片描述

三、gzip压缩 3.1 安装@originjs/vite-plugin-commonjs为了不让compression-webpack-plugin报错

npm install @originjs/vite-plugin-commonjs compression-webpack-plugin @gfx/zopfli --save-dev optimizeDeps: { esbuildOptions: { plugins: [ esbuildCommonjs([ new CompressionPlugin({ filename: "[path][base].gz", algorithm: "gzip", test: /\.js$|\.css$|\.html$/, threshold: 10240, minRatio: 0.8, }), new CompressionPlugin({ filename: "[path][base].br", algorithm: "brotliCompress", test: /\.(js|css|html|svg)$/, compressionOptions: { params: { [zlib.constants.BROTLI_PARAM_QUALITY]: 11, }, }, threshold: 10240, minRatio: 0.8, }), ]) ] } },

四、配置路径

resolve: { alias: { '@': path.resolve(__dirname, './src') } },

五‘配置移动端自适应（pc也可以使用）安装

npm i postcss-px-to-viewport

注意：scss less css不能有注释，否则报错

css: { postcss: { plugins: [ postcssPxTtoViewport({ unitToConvert: 'px', viewportWidth: 750, unitPrecision: 5, propList: ['*'], viewportUnit: 'vw', fontViewportUnit: 'vw', selectorBlackList: [], minPixelValue: 1, mediaQuery: false, replace: true, exclude: [], landscape: false, }) ] }, }

六、本地代理

server: { port: 8080, proxy: { '/api: { target: 'http://****', changeOrigin: true, rewrite: (path) => path.replace(/^\/is/, '') } } },

完整vite.config.js

import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import path from 'path'; import { esbuildCommonjs } from '@originjs/vite-plugin-commonjs' import CompressionPlugin from 'compression-webpack-plugin' import zlib from 'zlib' import postcssPxTtoViewport from "postcss-px-to-viewport" export default defineConfig({ optimizeDeps: { esbuildOptions: { plugins: [ esbuildCommonjs([ new CompressionPlugin({ filename: "[path][base].gz", algorithm: "gzip", test: /\.js$|\.css$|\.html$/, threshold: 10240, minRatio: 0.8, }), new CompressionPlugin({ filename: "[path][base].br", algorithm: "brotliCompress", test: /\.(js|css|html|svg)$/, compressionOptions: { params: { [zlib.constants.BROTLI_PARAM_QUALITY]: 11, }, }, threshold: 10240, minRatio: 0.8, }), ]) ] } }, plugins: [react()], resolve: { alias: { '@': path.resolve(__dirname, './src') } }, css: { postcss: { plugins: [ postcssPxTtoViewport({ unitToConvert: 'px', viewportWidth: 750, unitPrecision: 5, propList: ['*'], viewportUnit: 'vw', fontViewportUnit: 'vw', selectorBlackList: [], minPixelValue: 1, mediaQuery: false, replace: true, exclude: [], landscape: false, }) ] }, }, publicPath: "./", // 如果你不需要使用eslint，把lintOnSave设为false即可 lintOnSave: false, // 打包时不生成.map文件 productionSourceMap: false, //本地代理 server: { proxy: { '/api': { target: 'http://xxx:8080/', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } })

下一篇：配置react-router

【本文地址】

公司简介

联系我们